<template>
    <div>
        <pt-table :data="data" url="categories" ref="tableRef"></pt-table>
        <pt-form type="dialog" url="categories" :rules="formData" ref="formRef"></pt-form>
    </div>
</template>

<script lang="ts" setup>
import type { IFormConfig } from '@pangtou/form'
import type { ITable } from '@pangtou/table'
import { ref, onMounted } from 'vue'

const formRef = ref()
const tableRef = ref()

const plus = (row: any) => {
    formRef.value.action.reset()
    formRef.value.action.reload({ parent_id: row['id'], channel_model_id: row['channel_model_id'] })
    formRef.value.action.show()
}

onMounted(() => {
    tableRef.value.action.on('plus', plus)
    tableRef.value.action.setFormRef(formRef)
    formRef.value.action.on('submitted', () => {
        tableRef.value.action.loadData()
    })
})

const data: ITable = {
    header: {
        buttons: ['add', 'del', 'refresh', 'extend'],
        search: false,
    },
    page: false,
    column: [
        { type: 'selection' },
        { label: '栏目名称', prop: 'title' },
        { label: '模型', prop: 'model.title' },
        { label: '权重', prop: 'weight' },
        { label: '状态', prop: 'status', render: 'switches', width: '80' },
        {
            label: '操作',
            width: '140',
            fixed: 'right',
            buttons: [{ icon: 'plus', event: 'plus' }, 'edit', 'del'],
        },
    ],
}

const formData: IFormConfig = {
    title: '分类管理',
    row: 20,
    rules: [
        {
            type: 'col',
            prop: { span: 12 },
            children: [
                { type: 'divider', label: '基础信息' },
                { field: 'title', label: '分类标题', required: true },
                {
                    field: 'channel_model_id',
                    type: 'select',
                    label: '所属模型',
                    required: true,
                    options: { url: '/channel-lists' },
                    prop: { clearable: true, filterable: true },
                },
                {
                    field: 'parent_id',
                    type: 'select',
                    label: '上级栏目',
                    required: true,
                    value: 0,
                    options: { url: '/categories-tree' },
                    prop: { clearable: true, filterable: true },
                },
                { field: 'weight', label: '权重', type: 'number', value: 99 },
                { field: 'intro', label: '描述', type: 'textarea' },
            ],
        },
        {
            type: 'col',
            prop: { span: 12 },
            children: [
                { type: 'divider', label: 'SEO信息' },
                { field: 'set_title', label: '标题' },
                { field: 'seo_keywords', label: '关键词' },
                { field: 'seo_description', label: '描述信息', type: 'textarea' },
            ],
        },
    ],
}
</script>
